import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Dimensions
} from 'react-native'
import Swiper from 'react-native-swiper'
import Button from 'react-native-button'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height


class Slider extends Component {
  constructor(props) {
    super(props)

    this.state = {
      banners: [
        require('../assets/images/s1.jpg'),
        require('../assets/images/s2.jpg'),
        require('../assets/images/s3.jpg')
      ],
      loop: false
    }
  }

  _enter() {
    this.props.enterSlide()
  }

  render() {
    return (
      <Swiper style={styles.container}
        dot={<View style={styles.dot} />}
        activeDot={<View style={styles.activeDot} />}
        paginationStyle={styles.pagination}
        loop={this.state.loop}>
        <View style={styles.slide}>
          <Image style={styles.image} source={this.state.banners[0]} />
        </View>
        <View style={styles.slide}>
          <Image style={styles.image} source={this.state.banners[1]} />
        </View>
        <View style={styles.slide}>
          <Image style={styles.image} source={this.state.banners[2]} />
          <Button style={styles.btn} onPress={() => { this._enter() }}>立即体验</Button>
        </View>
      </Swiper>
    )
  }
}

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  image: {
    width: width,
    height: height
  },

  dot: {
    width: 14,
    height: 14,
    backgroundColor: 'transparent',
    borderColor: '#ccc',
    borderRadius: 7,
    borderWidth: 1,
    marginLeft: 12,
    marginRight: 12
  },

  activeDot: {
    width: 14,
    height: 14,
    backgroundColor: '#ee753c',
    borderRadius: 7,
    marginLeft: 12,
    marginRight: 12
  },

  pagination: {
    bottom: 30
  },

  btn: {
    width: width - 100,
    padding: 15,
    marginTop: -120,
    backgroundColor: '#ee753c',
    color: '#fff',
    fontSize: 18,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#ee753c'
  }

})

module.exports = Slider